<template>
	<view class="visitorCountsWp">
		<view class="accessRecordWp">
			<accessRecord :countView="countView"></accessRecord>
		</view>
		<view class="tabBarWp">
			<u-tabs @click="tapTabs" :scrollable='false' :list="tabBarList" lineWidth="0" lineColor="#276AEE"
				:activeStyle="{
			            color: '#276AEE',
			            fontWeight: 'bold',
			            transform: 'scale(1.2)',
			        }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" itemStyle="font-size:24rpx;height:80rpx;">
			</u-tabs>
		</view>
		<view class="rankingListWp">
			<view class="moreListWp" v-if="visitorRankingList.length>0">
				<view class="moreItem" v-for="(item,index) in visitorRankingList" :key="index"
					@click.stop="goToDetail(item)">
					<view class="left">
						<img :src="item.photo" v-if="item.photo" alt="" class='leftImgWp'>
						<u-image v-else src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
							width="96rpx" height="96rpx" alt=""></u-image>
					</view>
					<view class="right">
						<view style="display: flex; justify-content: space-between;">
							<view class="name "><text class="u-line-1">{{item.name?item.name:''}}</text> </view>
							<view class="addBtn" hover-class="hoverClass1" style="width: 176rpx;"
								v-if="item.isFriend==0" @click.stop='handleAdd(item)'>
								添加好友
							</view>

						</view>
						<view class="company">
							{{item.company?item.company:''}}
						</view>
						<view class="number">
							<text>第 <text style="color: #276AEE;">{{item.num}} </text> 次查看我的名片</text>
							<text>{{item.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
			<nodata v-else></nodata>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="showMoreListPopup" :round="20" @close='hiddenMoreListPopup' mode="bottom"
			:closeOnClickOverlay='true'>
			<view class="modelTitle">
				添加好友
			</view>
			<view class="remarkWp">
				<u--input placeholder="备注" border="bottom" maxlength="20" v-model="remark"></u--input>
			</view>
			<!-- 操作栏 -->
			<view class="operateList">
				<view class="btnWp">
					<u-button type="info" :plain="true" @click='hiddenMoreListPopup'>取消</u-button>
				</view>
				<view class="btnWp">
					<u-button type="primary" color="#276aee" @click="add">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import accessRecord from '@/pagesCard/components/accessRecord/accessRecord.vue'
	import {
		getTodayTime,
		getYesterdayTime,
		getMonthTime,
		getLastWeekTime,
	} from '@/plugins/utils.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			accessRecord
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 5,
				queryIndex: 0,
				visitorRankingList: [],
				currentIndex: 0,
				tabBarList: [{
						name: '今日 '
					},
					{
						name: '昨日 '
					},
					{
						name: '近7天'
					},
					{
						name: '近30天'
					},
				],
				countView: {},
				productRankingList: [],
				total: 0,
				queryTime: [],
				showMoreListPopup: false,
				itemInfo: {},
				remark: ''
			};
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize < this.total) {
				this.pageNo++
				this.queryVisitorRankingList()
			}
		},
		created() {
			this.tapTabs({
				index: 0
			});
			this.queryVisitorCounts()
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			handleAdd(item) {
				this.itemInfo = item
				this.showMoreListPopup = true
				console.log(item);
			},
			hiddenMoreListPopup() {
				this.showMoreListPopup = false
			},
			async add() {
				//todo  返回数据 需要重新核对
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				const {
					id: friendId,
					name,
					head,
					unionId: friendUnionId,
					openId: friendOpenId
				} = this.userInfo
				const {
					friendOpenId: openId,
					friendId: cardId,

				} = this.itemInfo //好友数据
				console.log(this.itemInfo, '//好友数据 this.itemInfo');
				let payload = {
					//使用好友数据
					openId,
					cardId,
					//使用自身数据
					name,
					head,
					friendOpenId,
					friendId,
					friendUnionId,
					remark: this.remark,
				}
				let res2 = await this.$api.addNewFriend(payload)
				if (res2.success) {
					uni.showToast({
						title: '已发送好友申请',
						icon: 'none'
					});
					this.showMoreListPopup = false

				} else {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
					this.showMoreListPopup = false
				}
			},
			goToDetail(item) {
				const {
					friendId,
					friendOpenId,
					friendUnionId
				} = item
				if (friendId) {
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${friendId}&openId=${friendOpenId}&unionId=${friendUnionId}`
					})
				}
			},
			//切换更新时间查询
			tapTabs({
				index
			}) {
				this.pageNo = 1
				this.total = 0
				this.visitorRankingList = []
				switch (index) {
					case 0:
						//今日
						this.queryIndex = index
						let queryTime = []
						this.queryTime = getTodayTime()
						this.queryVisitorRankingList()
						break;
					case 1:
						//昨日
						this.queryIndex = index
						this.queryTime = getYesterdayTime()
						this.queryVisitorRankingList()
						break;
					case 2:
						//7日
						this.queryIndex = index
						this.queryTime = getLastWeekTime()
						this.queryVisitorRankingList()
						break;
					case 3:
						//30日
						this.queryIndex = index
						this.queryTime = getMonthTime()
						this.queryVisitorRankingList()
						break;
				}
			},
			async queryVisitorCounts() {

				let params = {
					cardId: this.userInfo.id,
				}
				let res = await this.$api.getAccessRecord(params)
				if (res.success) {
					this.countView = res.result
					console.log('统计数据', this.countView);
				} else {
					this.countView = {}
				}
			},
			//访客统计
			async queryVisitorRankingList() {
				let params = {
					beginTime: this.queryTime[0],
					endTime: this.queryTime[1],
					cardId: this.userInfo.id,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				let res = await this.$api.getAccessRecordByDate(params)
				if (res.success && res.result.records) {
					this.visitorRankingList = [...this.visitorRankingList, ...res.result.records]
					this.total = res.result.total
					console.log('访客统计排行榜', this.visitorRankingList);
				} else {
					this.visitorRankingList = []
				}
			},
			//商品排行版
			async queryGoodsRankingList(queryTime) {
				let params = {
					beginTime: queryTime[0],
					endTime: queryTime[1],
					cardId: this.userInfo.id,
				}
				let res = await this.$api.queryStatisticsVisitTimes(params)
				if (res.success) {
					this.productRankingList = res.result.filter(item => {
						return item.goods_name != null
					})
					console.log('商品统计排行榜', this.productRankingList);
				} else {
					this.productRankingList = []
				}
			},
		}
	}
</script>

<style lang="scss">
	.visitorCountsWp {


		.tabBarWp {
			background-color: #fff;
		}

		.rankingListWp {
			margin-top: 30upx;
			padding-bottom: 50upx;
			background-color: #fff;

			.title {
				padding: 40upx 30upx;
				font-size: 24upx;
				font-weight: 400;
				border-bottom: 1upx solid #eee;
			}

			.rankingList {


				.rankingItem {
					padding: 20upx 0;
					font-size: 22upx;
					font-weight: 400;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					border-bottom: 1upx solid #eee;

					.indexWp {
						.rankingIcon {
							width: 40upx;
							height: 40upx;
						}

						.rankingText {
							font-size: 30upx;
							margin-right: 10upx;
							margin-left: 10upx;
						}
					}

					.avatarWp {
						display: flex;
						// justify-content: space-evenly;
						align-items: center;
						width: 220upx;
						overflow: hidden;

						.imgWp {
							width: 60upx;
							height: 60upx;
							margin-right: 20upx;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.name {}

					}

				}

				.productName {
					overflow: hidden;
					width: 200upx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.productVisitor {
					// margin-left: 20upx;
				}

				.productImgWp {
					width: 100upx !important;
					height: 60upx !important;

					img {

						border-radius: 0 !important;
					}

				}
			}
		}

		.moreListWp {
			padding-top: 30upx;

			.moreItem {
				display: flex;
				margin: 30upx;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 100upx;
						height: 100upx;
					}
				}

				.right {
					flex: 1;

					.addBtn {
						width: 176rpx;
						height: 56rpx;
						background: #E9F0FD;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #E9F0FD;
						color: #276AEE;
						text-align: center;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 56rpx;

						&:active {
							background: #fff
						}
					}

					.name {
						max-width: 400upx;
						height: 29px;
						overflow: hidden;
						font-size: 30upx;
						font-weight: 500;
						color: #000000;
						line-height: 29upx;
					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						padding-top: 22upx;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 34rpx;
					}

					.number {
						padding-top: 22upx;
						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}


		}

		.modelTitle {
			margin-top: 30upx;
			text-align: center;
			font-size: 30upx;
			font-weight: 400;
			color: #000000;
		}

		.operateList {
			display: flex;
			justify-content: space-evenly;
			margin: 30upx;

			.btnWp {
				width: 300upx;
			}
		}
	}
</style>